<style>
  .layui-table-cell .layui-table-sort {
    display: none;
  }

  .import {
    opacity: 0;
    position: absolute;
    width: 69px;
    height: 38px;
    margin-left: -10px;
  }
</style>
<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 头部操作栏 -->
      <div class="layui-form lay-header">
        <div class="toolbar">
          <div class="layui-form-item lay-query-content">
            <div class="lay-query-box">
              <div class="query-lt">
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">客户名称：</label>
                  <div class="layui-input-inline">
                    <input name="customerName" id="customerName" class="layui-input" type="text" placeholder="请输入客户名称" autocomplete="off" />
                  </div>
                </div>
                <!-- 客户名称 -->

                <!-- <div class="layui-inline">
                                    <label class="layui-form-label w-auto">采购组织：</label>
                                    <div class="layui-input-inline">
                                        <input name="purchaseTissue" id="purchaseTissue" class="layui-input"
                                               type="text"
                                               placeholder="请输入采购组织" autocomplete="off"/>
                                    </div>
                                </div> -->
                <!-- 
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">物料编码：</label>
                                    <div class="layui-input-inline">
                                        <input name="skuCode" id="skuCode" class="layui-input"
                                               type="text"
                                               placeholder="请输入物料编码" autocomplete="off"/>
                                    </div>
                                </div> -->

                <div class="layui-inline">
                  <label class="layui-form-label w-auto">计划接收时间：</label>
                  <div class="layui-input-inline">
                    <input id="pTime" class="layui-input date-icon" type="text" placeholder="选择计划接收时间" autocomplete="off" readonly />
                    <input name="startTime" id="startTime" style="display: none" />
                    <input name="endTime" id="endTime" style="display: none" />
                  </div>
                </div>
              </div>
              <div class="query-rt">
                <div class="layui-inline">
                  <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog" lay-submit layui-form-keyDownSearch="true">查询</button>
                  <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="lay-btn-rows">
          <div class="lay-btn-box">
            <div class="lay-btn-lt">
              <button id="addProductionPlan" class="layui-btn icon-btn color-reseda">添加</button>
              <button id="uploaderInputBut" class="layui-btn icon-btn color-reseda">
                <input id="uploaderInput" type="file" name="file" class="import" accept=".xls,.xlsx" />
                导入
              </button>
              <button id="fromLocalWarehouseBtnTemplate" class="layui-btn icon-btn color-green">模板下载</button>
            </div>
            <div class="lay-btn-rt"></div>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <table class="layui-table" id="demandPlanInfo" lay-filter="demandPlanInfo"></table>
    </div>
  </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="productPlanningTableBar">
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit1">修改</a>
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="detail">修改</a>
</script>

<!-- js部分 -->
<script>
  layui.use(['layer', 'form', 'table', 'laydate', 'admin', 'laytpl', 'tableTreeDj', 'config'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var laydate = layui.laydate;
    var table = layui.table;
    var form = layui.form;
    var config = layui.config;
    var admin = layui.admin;
    var tableTree = layui.tableTreeDj;

    //时间范围
    laydate.render({
      elem: '#pTime',
      type: 'date',
      range: true,
      done: function (value, date, endDate) {
        if (value) {
          var dateValue = value.split(' - ');
          $("input[name='startTime']").val(dateValue[0] + ' 00:00:00');
          $("input[name='endTime']").val(dateValue[1] + ' 23:59:59');
        } else {
          $("input[name='startTime']").val('');
          $("input[name='endTime']").val('');
        }
      },
    });

    // 渲染表格
    var insTb = table.render({
      id: 'demandPlanInfo',
      elem: '#demandPlanInfo',
      url: config.base + 'production/productionPlan/admin/demandPlan/list',
      page: true,
      toolbar: true,
      defaultToolbar: ['filter'],
      cellMinWidth: 100,
      cols: [
        [
          { type: 'numbers', title: '序号', align: 'center' },
          { field: 'jihuabianma', title: '需求计划编码', align: 'center' },
          { field: 'wuliaoshu', title: '所含物料数', align: 'center' },
          { field: 'PlantCode', title: 'PlantCode', align: 'center' },
          { field: 'customerName', title: '客户名称', align: 'center' },
          { field: 'planReceiveTime', align: 'center', title: '接收月份' },
          { field: 'addxingzhi', title: '添加性质', align: 'center' },
          { field: 'createBy', title: '添加人', align: 'center' },
          { field: 'createTime', title: '添加时间', align: 'center' },
          // ,{field: 'skuCode', title: '物料编码', align: 'center'}
          // ,{field: 'productLineName', title: '生产线', align: 'center'}
          // ,{field: 'skuNameSpec', title: '物料描述', align: 'center',width: 160}
          // ,{field: 'purchaseTissue', title: '采购组织', align: 'center'}
          // ,{field: 'purchaseTissueName', title: '采购组名称', align: 'center'}
          // ,{field: 'materialTypeName', align: 'center', title: '物料类型'}
          // ,{field: 'tripartiteStorage', align: 'center', title: '三方仓库存'}
          // ,{field: 'averageArrival', align: 'center', title: '近三个月平均到货',width: 150}
          { align: 'center', toolbar: '#productPlanningTableBar', title: '操作' },
        ],
      ],
    });

    //渲染下拉
    form.render('select');
    // 模板下载
    $('#fromLocalWarehouseBtnTemplate').click(function () {
      window.location.href = config.base + 'production/productionPlan/admin/demandPlan/template';
    });

    // 导入excel
    $('#uploaderInput').on('change', function (e) {
      layer.load(2);
      var formData = new FormData();
      var files = e.target.files;
      let that = $(this);
      formData.append('file', files[0]);
      formData.append('name', files[0].name); //这个地方可以传递多个参数
      $.ajax({
        url: config.base + 'production/productionPlan/admin/demandPlan/importExcel',
        data: formData,
        headers: { Authorization: 'Bearer ' + config.getToken() },
        type: 'POST',
        processData: false,
        contentType: false,
        success: function (res) {
          layer.closeAll('loading');
          if (res.code == 200) {
            layer.msg(res.msg, { icon: 1 });
            layer.closeAll('page');
            setTimeout((_) => {
              location.reload();
            }, 1000);
          } else {
            layer.msg(res.msg, { icon: 2 });
          }
          that.val('');
        },
      });
    });
    function openForm(eventName, data) {
      admin.formOpen({
        type: 1,
        area: ['78%', '84%'],
        title: '需求计划详情',
        path: 'components/product/demandPlan/demandPlanDetail.html',
        success: function () {
          parentData.data = data;
          parentData.eventName = eventName;
        },
      });
    }

    // 工具条点击事件
    table.on('tool(demandPlanInfo)', function (obj) {
      var data = obj.data;
      if (obj.event === 'edit1') {
        //修改
        showEditModel(data);
      } else if (obj.event === 'detail') {
        // 详情
        openForm('detail', data);
      }
    });

    // 搜索
    form.on('submit(formSubSearchLog)', function (data) {
      insTb.reload({ where: data.field, page: { curr: 1 } }, 'data');
    });

    // 重置搜索
    form.on('submit(resets)', (data) => {
      $('.lay-header').find('select').val('');
      $('.lay-header').find('input').val('');
      let field = data.field;
      for (let key in field) {
        field[key] = '';
      }
      insTb.reload({ where: field, page: { curr: 1 } }, 'data');
    });

    // 添加按钮点击事件
    $('#addProductionPlan').click(function () {
      addProductionPlan();
    });

    // 添加需求计划
    function addProductionPlan() {
      let title = '添加需求计划';
      admin.formOpen({
        type: 1,
        area: ['78%', '84%'],
        style: 'font-size: 20px;',
        title: title,
        path: 'components/product/demandPlan/addDemandPlan.html',
        end: function (data) {
          insTb.reload({ page: { curr: 1 } }, 'data');
        },
      });
    }

    // 添加按钮点击事件
    $('#productPlanningAdd').click(function () {
      showEditModel();
    });

    // 显示编辑弹窗
    function showEditModel(data) {
      let title = '编辑需求计划';
      admin.putTempData('demandPlanInfoData', data);
      admin.formOpen({
        type: 1,
        area: ['78%', '84%'],
        style: 'font-size: 20px;',
        title: title,
        path: 'components/product/demandPlan/demandPlanInfo.html',
        finish: function () {
          table.reload(insTb, {});
        },
      });
    }
  });
</script>
